import React from 'react';
import styled from 'styled-components';

const Label = styled.label`
  display: flex;
  align-items: center;
  padding: 12px 16px;
  line-height: 20px;
  > span{
    margin-right: 16px;
    white-space: nowrap;
  }      
  > input{
    flex-grow:1;
    background: none;
    border:none;
  }
`;

type Props = {
  label: string;
} & React.InputHTMLAttributes<HTMLInputElement>
const Editor: React.FC<Props> = (props) => {
  const {label, children, ...rest} = props;
  return (
    <Label>
      <span>{label}</span>
      <input {...rest}/>
    </Label>
  );
};

export {Editor, Label};